<template>
	<view class="gl-container">
		<view class="gl-header">
			<view class="gl-header-left" style="gap: 10px; flex-wrap: wrap;">
				<uni-search-bar v-model="search" placeholder="关键字搜索" cancelButton="none"
					@confirm="refresh"></uni-search-bar>
			</view>
			<view class="gl-header-right">
				<!--
				<view class="gl-button gl-button-base" hover-class="button-base-hover" :hover-stay-time="100"
					@click="refresh">
					<uni-icons type="reload" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">刷新</text>
				</view>
				-->
			</view>
		</view>
		<view class="gl-body table-container" :style="{height:swiperH+'px'}">

			<uni-table stripe type="selection" emptyText="暂无更多数据">
				<uni-tr class="table-head">
					<uni-th align="center" width="30">ID</uni-th>
					<uni-th width="100">用户昵称</uni-th>
					<uni-th width="120">申请金额</uni-th>
					<uni-th>收款账户</uni-th>
					<uni-th width="100">户名</uni-th>
					<uni-th>开户行</uni-th>
					<uni-th width="160">申请时间</uni-th>
					<uni-th>状态</uni-th>


					<uni-th>审核员</uni-th>
					<uni-th>审核时间</uni-th>

					<uni-th>出纳</uni-th>
					<uni-th>核销时间</uni-th>


					<uni-th>
						<view style="display: flex;align-items: center;gap: 10px;">
							<view class="gl-link gl-link-base" @click="open(null)">刷新</view>
							<view class="gl-link gl-link-base">导出</view>
							<view class="gl-link gl-link-base">打印</view>
						</view>
					</uni-th>
				</uni-tr>



				<uni-tr v-for="(item,index) in couponList" :key="index">
					<uni-td>{{item.id}}</uni-td>
					<uni-td>{{item.sub_staff.nicename}}</uni-td>
					<uni-td>{{zipPrice(item.price)}}</uni-td>
					<uni-td>{{item.card}}</uni-td>
					<uni-td>{{item.name}}</uni-td>
					<uni-td>{{item.bank}} {{item.store}}</uni-td>
					<uni-td>{{item.create}}</uni-td>
					<uni-td :style="{color: zipState(item.status).color}">{{ zipState(item.status).text }}</uni-td>


					<uni-td>{{item.sub_answer?.nicename}}</uni-td>
					<uni-td>{{item.lasttime}}</uni-td>

					<uni-td>{{item.sub_player?.nicename}}</uni-td>
					<uni-td>{{item.paytime}}</uni-td>


					<uni-td>
						<view style="display: flex;align-items: center;gap: 10px;">
							<view v-if="item.status===0" class="gl-link gl-link-success" @click="eventAgree(item.id)">
								审核</view>
							<view v-if="item.status===0" class="gl-link gl-link-error" @click="eventRemove(item.id)">
								移除</view>
							<view v-if="item.status===1" class="gl-link gl-link-warning"
								@click="toMoneyChange(item.id)">
								转账</view>
							<view v-if="item.status===2" class="gl-link gl-link-base" @click="showOrderFromBank(item)">
								查看</view>
						</view>
					</uni-td>
				</uni-tr>

			</uni-table>

		</view>
		<view class="gl-footer">
			<uni-pagination :show-icon="true" :total="count" :pageSize="size" v-model="page" title="翻页"
				@change="refresh" />
		</view>
	</view>
</template>

<script>
	import psMethod from '@/common/psMethod';
	export default {
		data() {
			return {
				swiperH: 0,
				count: 0, // 记录数
				page: 1, // 当前页
				size: 50, // 页大小	
				curpage: 0,
				sConf: getApp().globalData,
				search: '',
				couponList: []
			}
		},
		mounted() {
			console.log('页面挂载');
			let window = uni.getWindowInfo();
			this.designLayout(window.windowHeight);
			this.loadDefData()
		},
		methods: {
			showOrderFromBank(e) {
				uni.showModal({
					title: '银行回单',
					content: `${e.order}`,
					showCancel: false
				})
			},
			refresh() {
				this.open(null)
			},
			designLayout(wh) {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.gl-body').boundingClientRect();
					query.select('.gl-footer').boundingClientRect();
					query.exec((res) => {
						this.swiperH = wh - Math.ceil(res[0].top) - Math.ceil(res[1].height) - 10;
					});
				})
			},
			open() {
				console.log('open');
				this.page = 1
				this.curpage = 0
				this.couponList = []
				this.loadDefData()
			},
			async loadDefData() {
				await this.loadGiveWalletList().then(res => {
					console.log('加载提现记录', res);
					if (this.page > this.curpage) {
						this.couponList = this.couponList.concat(res.resmsg)
						this.count = res.count
						this.size = res.size
						this.curpage = this.page
					}
				})
			},
			/**
			 * 转款
			 */
			toMoneyChange(e) {
				console.log('toMoneyChange', e);
				let that = this
				uni.showModal({
					title: '银行转账回执',
					placeholderText: '请输入银行凭证流水号',
					editable: true,
					success(r) {
						if (r.confirm && r.content) {
							let data = {
								idx: e,
								order: r.content
							}
							console.log('请求参数', data);
							that.loadToBankOrderPost(data).then(res => {
								console.log('提交打款凭证', res);
								that.open(null)
							}).catch(err => {
								uni.showToast({
									title: '请求失败'
								})
							})
						}
					}
				})
			},
			/**
			 * 新审核通过
			 */
			eventAgree(e) {
				let that = this
				let token = this.sConf.auth.token || '';
				let data = {
					idx: e,
					status: 1
				}
				uni.showModal({
					title: '审核',
					content: '是或否要审核该记录',
					success(r) {
						if (r.confirm) {
							psMethod.syncAuthenticatorRequest('/admin/toBankLook/', 'POST', token, data).then(
								res => {
									console.log('审核->', res);
								}).catch(err => {
								console.log('审核=>', err);
								uni.showModal({
									title: '失败',
									content: `${err.resmsg.detail || '其他错误'}`,
									showCancel: false
								})
							}).finally(() => {
								that.open(null)
							})
						}
					}
				})
			},
			/**
			 * 新驳回
			 */
			eventRemove(e) {
				let that = this
				let token = this.sConf.auth.token || '';
				let host = `/admin/toBank/${e}/`;
				uni.showModal({
					title: '移除',
					content: '是或否要移除该记录',
					success(r) {
						if (r.confirm) {
							psMethod.syncAuthenticatorRequest(host, 'DELETE', token, {}).catch(err => {
								console.log('审核=>', err);
								uni.showModal({
									title: '失败',
									content: `${err.resmsg.detail || '其他错误'}`,
									showCancel: false
								})
							}).finally(() => {
								that.open(null)
							})
						}
					}
				})
			},
			/**
			 * 审核
			 */
			lookChange(e) {
				console.log('lookChange', e);
				let that = this
				let accept = ['同意', '拒绝', '关闭']
				uni.showActionSheet({
					title: '审核提现申请',
					alertText: '审核提现申请',
					itemList: accept,
					success(r) {
						console.log('审核', accept[r.tapIndex]);
						if (r.tapIndex === 2) {
							return
						}
						let data = {
							idx: e
						}
						if (r.tapIndex === 0) {
							data['status'] = 1
						}
						if (r.tapIndex === 1) {
							data['status'] = -1
						}
						console.log('请求参数', data);
						that.loadToBankLookPost(data).then(res => {
							console.log('审核提现申请', res);
							that.open(null)
						}).catch(err => {
							uni.showToast({
								title: '请求失败'
							})
						})
					}
				})
			},
			loadToBankOrderPost(e) {
				let host = this.sConf.host + '/admin/toBankOrder/';
				let token = this.sConf.auth.token || '';
				return new Promise((resolve, reject) => {
					psMethod.authenticatorPostSync(host, token, e).then(res => {
						resolve(res)
					}).catch(err => {
						reject(err)
					})
				})
			},
			loadToBankLookPost(e) {
				let host = this.sConf.host + '/admin/toBankLook/';
				let token = this.sConf.auth.token || '';
				return new Promise((resolve, reject) => {
					psMethod.authenticatorPostSync(host, token, e).then(res => {
						resolve(res)
					}).catch(err => {
						reject(err)
					})
				})
			},
			loadGiveWalletList() {
				let host = this.sConf.host + '/admin/toBank/';
				let token = this.sConf.auth.token || '';
				let data = {
					ordering: '-1'
				}
				return new Promise((resolve, reject) => {
					psMethod.authenticatorGetSync(host, token, data).then(res => {
						resolve(res)
					}).catch(err => {
						reject(err)
					})
				})
			},
			zipPrice(e) {
				return '￥' + (e / 100).toFixed(2) + '元'
			},
			zipState(e) {
				let states = [{
					value: 0,
					text: '待审核',
					color: '#f0ad4e'
				}, {
					value: 1,
					text: '已审核',
					color: '#007aff'
				}, {
					value: 2,
					text: '已支付',
					color: '#4cd964'
				}, {
					value: -1,
					text: '已拒绝',
					color: '#dd524d'
				}]
				return states.find(item => item.value === e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 表格垂直滚动 */
	.table-container {
		/* height: 400px; */
		overflow-y: auto;

		::v-deep .uni-table .table-head th {
			font-weight: bold;
			z-index: 2;
			background-color: #fff;
			position: -webkit-sticky;
			position: sticky;
			top: 0;
		}

		::v-deep .uni-table-scroll {
			overflow: visible;
		}
	}
</style>